<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    title="选择优惠券"
    width="50%"
    top="50px"
    append-to-body
    class="group-dialog"
  >
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        ref="couponTableRef"
        :data="data"
        border
        :header-cell-style="{
          background: '#EEF3FF',
          color: '#333333'
        }"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="shopCouponId"
        @selection-change="selectCouponChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        />
        <el-table-column
          prop="couponName"
          label="优惠券"
          align="center"
          width="220"
        />
        <el-table-column
          prop="content"
          label="优惠内容"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="stockNumber"
          label="库存"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="number"
          align="center"
          label="赠券数"
          width="220"
        >
          <template #default="scope">
            <el-input-number
              v-model="scope.row.number"
              controls-position="right"
              :min="1"
              :max="99"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.page"
        :page-sizes="[5, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="justify-content: flex-end; margin: 20px 0;"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSelected">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, shallowRef } from 'vue';
import {
  getSelectCoupon,
} from '@/api/customer'
import { ElMessage } from 'element-plus';

const emits = defineEmits(['selected'])

let visible = shallowRef(false);
let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
let query = reactive({
  startTime: '',
  endTime: '',
})
let data = ref([]);
let multipleSelection = ref([]);
let defaultSelection = ref([]); // 用作multipleSelection默认选中中转
const couponTableRef = ref();

/**
 * 
 * @param {array} params.defaultSelects 已选中的优惠券
 * @param {string} params.startTime 查询可选优惠券开始时间
 * @param {string} params.endTime 查询可选优惠券结束时间
 */
function show (params = {
  defaultSelects: [],
  startTime: '',
  endTime: ''
}) {
  visible.value = true
  let {
    defaultSelects,
    startTime,
    endTime,
  } = params
  defaultSelection.value = defaultSelects || []
  query.startTime = startTime || ''
  query.endTime = endTime || ''
  getCouponData()
}

function handleClose () {
  visible.value = false
}

function getCouponData () {
  getSelectCoupon({
    page: page.page,
    pageSize: page.pageSize,
    startTime: query.startTime,
    endTime: query.endTime,
  }).then(res => {
    data.value = res.data && res.data.list || []
    page.total = res.data.total
    if (multipleSelection.value) {
      data.value.forEach((row) => {
        defaultSelection.value.forEach(item => {
          if (item.shopCouponId === row.shopCouponId) {
            row.number = item.number
            couponTableRef.value.toggleRowSelection(row, true)
          }
        })
      })
    }
  })
}
function handleCurrentChange (val) {
  page.page = val
  getCouponData()
}

function handleSizeChange (val) {
  page.page = 1
  page.pageSize = val
  getCouponData()
}

function selectCouponChange (val) {
  multipleSelection.value = val
}
function handleSelected () {
  let checkNumber = false
  if (multipleSelection.value) {
    multipleSelection.value.forEach(item => {
      if (!item.number) {
        checkNumber = true
      }
    })
  }
  if (checkNumber) {
    return ElMessage.warning('请为选中的优惠券填写赠券数！')
  }
  emits('selected', multipleSelection.value)
  visible.value = false;
  couponTableRef.value.clearSelection()
}

defineExpose({
  show,
  handleClose
})
</script>
